<template>
	<view class="time-setting">
		<view class="time-title">周日期</view>
		<view class="card-box">
			<view class="card" v-for="(item,index) in timeList" :key="index">
				<view class="card-item card-item-title">名称：{{item.timePeriodName || '未设置'}}</view>
				<view class="card-item">
					<text>日期范围：</text>
					<text v-for="(date,id) in item.weekArr" :key="id">{{weekObj[date]}} <text v-if="id<item.weekArr.length-1">、</text> </text>
				</view>
				<view class="flex-box">
					<view class="card-item">时间范围：{{item.startTime}} ~ {{item.endTime}}</view>
					<view class="btn-box">
						<view class="edit-btn" @click="openPop('edit',item)">编辑</view>
						<view class="delete-btn" @click="deleteEvent(item)">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noMore">暂无更多</view>
		<view class="footer-box">
			<text class="add-btn" @click="openPop('add')">添加时段</text>
		</view>
		<uni-popup ref="popup" type="bottom" :safe-area='false' :mask-click="false">
			<view class="pop-box">
				<view>
					<view class="pop-title">{{type==='add'?'新增时段':'编辑时段'}}</view>
					<view class="pop-item-box">
						<view class="pop-item pop-star">名称：</view>
						<view class="pop-item">
							<uni-easyinput class="pop-input" type="text" :maxlength="50" primaryColor="#ffd589"
								trim="all" v-model="currentConfig.timePeriodName" placeholder="请输入"></uni-easyinput>
						</view>
					</view>
					<view class="pop-item-box">
						<view class="pop-item pop-star">选择周日期（多选）：</view>
						<view class="pop-item" @click="checkDate">
							<text v-if="currentConfig.weekArr.length === 0">请选择周日期</text>
							<text v-else>
								<text v-for="(date,id) in currentConfig.weekArr" :key="id">{{weekObj[date]}} <text v-if="id<currentConfig.weekArr.length-1">、</text></text>
							</text>
						</view>
					</view>
					<view class="pop-item-box">
						<view class="pop-item pop-star">时间范围:</view>
						<view class="time-box pop-item">
							<picker mode="time" value="hh:mm" @change="timeStartChange">
								<view class="picker-tip">{{currentConfig.startTime || '选择开始时间'}}</view>
							</picker>
							<text style="margin: 0 20rpx;"> 至 </text>
							<picker mode="time" value="hh:mm" @change="timeEndChange">
								<view class="picker-tip">{{currentConfig.endTime || '选择结束时间'}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="pop-btn-box">
					<view class="cancel-btn" @click="closePop">取消</view>
					<view class="submit-btn" @click="submitEvent">确认</view>
				</view>
			</view>
		</uni-popup>
		<dateUnit v-if="isLoad" ref="dateUnit" :weekArr="currentConfig.weekArr" @changeWeek="changeWeek"></dateUnit>
	</view>
</template>

<script>
	import dateUnit from '../../components/date-unit.vue';
	export default {
		components:{
			dateUnit
		},
		data() {
			return {
				shopId: '',
				timeList: [],
				currentConfig: {
					startTime: '',
					endTime: '',
					timePeriodName: '',
					weekArr:[],
					type:''
				},
				isLoad:false,
				type: '',
				weekObj:{
					sun:'周日',
					mon:'周一',
					tue:'周二',
					wed:'周三',
					thu:'周四',
					fri:'周五',
					sat:'周六',
				}
			};
		},
		methods: {
			// 打开选择周弹窗
			checkDate(){
				this.$refs.dateUnit.openPop()
			},
			// 周值变化
			changeWeek(val){
				this.currentConfig.weekArr = val
			},
			// 时间选择器
			timeStartChange(e) {
				this.currentConfig.startTime = e.detail.value
			},
			timeEndChange(e) {
				this.currentConfig.endTime = e.detail.value
			},

			// 重置数据
			resetData() {
				this.currentConfig = {
					startTime: '',
					endTime: '',
					timePeriodName: '',
					weekArr:[],
					type:1
				}
			},
			// 打开弹窗
			openPop(type, item) {
				this.type = type
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				if (type === 'edit') {
					this.currentConfig = JSON.parse(JSON.stringify(item));
				} else {
					this.resetData()
				}
				this.isLoad = true
				this.$refs.popup.open('center')
			},
			closePop() {
				this.isLoad = false
				this.$refs.popup.close()
			},
			// 添加/编辑时段
			submitEvent() {
				if (!this.currentConfig.timePeriodName) {
					uni.showToast({
						title: '请输入时段名称',
						duration: 2000,
						icon: 'none'
					})
					return
				} else if (!this.currentConfig.weekArr.length) {
					uni.showToast({
						title: '请选择周日期',
						duration: 2000,
						icon: 'none'
					})
					return
				}else if (!this.currentConfig.startTime) {
					uni.showToast({
						title: '请选择开始时间',
						duration: 2000,
						icon: 'none'
					})
					return
				}else if (!this.currentConfig.endTime) {
					uni.showToast({
						title: '请选择结束时间',
						duration: 2000,
						icon: 'none'
					})
					return
				}
				const data = this.currentConfig
				data.shopId = this.shopId
				data.weeks = data.weekArr.join(',')
				let mathod = ''
				if (this.type === 'add') {
					mathod = 'post'
				} else {
					mathod = 'put'
				}
				//保存时间段
				this.$request({
					method: mathod,
					url: '/applet/store/productTimePeriod',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.getTimeList();
					this.closePop()
					this.resetData()
					this.isLoad = false
				})
			},

			// 删除时间段
			deleteEvent(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除该时段？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
                            const data = {
                            	shopId: this.shopId
                            }
                            this.$request({
                            	method: 'DELETE',
                            	url: `/applet/store/productTimePeriod/${item.timePeriodId}`,
                            	data,
                            	loading: false,
                            	isEncrypt: false
                            }).then(res => {
                            	if(res.code === 200){
									this.getTimeList()
									uni.showToast({
										title:'删除成功',
										duration:2000,
										icon:'none'
									})
								}else{
									uni.showToast({
										title:res.msg,
										duration:2000,
										icon:'none'
									})
								}
                            }).catch(err => {
                            	console.error('接口异常：', err)
                            })
						}
					}
				})
			},
			//获取时段列表
			getTimeList() {
				const data = {
					shopId: this.shopId
				}
				this.$request({
					method: 'post',
					url: `/applet/store/productTimePeriod/list`,
					data,
					loading: false,
					isEncrypt: false
				}).then(res => {
					this.timeList = res.rows || []
					this.timeList.forEach((item)=>{
						item.weekArr = item.weeks.split(',')
					})
				}).catch(err => {
					console.error('查询异常：', err)
				})
			}
		},
		onLoad(options) {
			this.shopId = options.shopId
			this.getTimeList()
		}
	}
</script>

<style lang="scss" scoped>
	.time-setting {
		padding-bottom: 112rpx;
		
		.time-title {
			position: relative;
			background: #FFF;
			padding: 30rpx;
			font-size: 32rpx;
		}
		
		.time-title::before {
			content: '';
			width: 8rpx;
			height: 36rpx;
			position: absolute;
			left: 10rpx;
			top: 34rpx;
			background: #ff9600;
		}

		.card-box {
			padding: 30rpx;
		}

		.card {
			background: #FFF;
			border-radius: 10rpx;
			padding: 20rpx;
			box-shadow: 0 2px 6px #CCC;
			margin-bottom: 20rpx;
		}

		.card-item {
			color: #333;
			line-height: 64rpx;
		}

		.card-item-title {
			font-weight: bold;
			color: #000;
			font-size: 30rpx;
		}

		.flex-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn-box {
			display: flex;
			align-items: center;
			font-size: 28rpx;

			.edit-btn {
				padding: 8rpx 16rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
				border: 1px solid #ff9600;
			}

			.delete-btn {
				padding: 8rpx 16rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
				color: #FFF;
				background: #ff9600;
				margin-left: 20rpx;
			}
		}
		
		.time-box {
			display: flex;
			align-items: center;
		}

		.footer-box {
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 30rpx 0;
			text-align: center;
			background: #FFF;

			.add-btn {
				display: inline-block;
				color: #FFF;
				background: #ff9600;
				font-size: 24rpx;
				border-radius: 10rpx;
				padding: 10rpx 60rpx;
			}
		}

		.pop-box {
			background: #FFF;
			border-radius: 20rpx;
			padding: 30rpx;
			width: 600rpx;

			.pop-title {
				font-size: 32rpx;
				font-weight: 600;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.pop-item-box {
				border-bottom: 1px solid #EEE;
				margin-bottom: 30rpx;
				
				.pop-item {
					font-size: 26rpx;
					margin-bottom: 20rpx;
				}
				
				.pop-star{
					position: relative;
				}
				
				.pop-star::before{
					position: absolute;
					content: '*';
					color: red;
					left: -14rpx;
					top: 0;
					
				}
			}
			
			.pop-unit {
				margin-left: 10rpx;
			}

			.pop-btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 60rpx;

				.cancel-btn {
					padding: 8rpx 36rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					border: 1px solid #CCC;
				}

				.submit-btn {
					padding: 8rpx 36rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					color: #FFF;
					background: #ff9600;
				}
			}
		}

		.noMore {
			text-align: center;
			padding: 32rpx 0;
			color: #CCC;
			font-size: 28rpx;
		}
	}
</style>